import React, {PureComponent} from 'react';
import {
	StyleSheet,
	Text,
	View,
	Dimensions
} from 'react-native';
import AnimatedBar from './anmiatedBar';

// 获取宽度
let { width: WIDTH, height: HEIGHT} = Dimensions.get('window');

/**
 * @FileName: DownloadPage
 * @Author: mazaiting
 * @Date: 2018/7/13
 * @Description:
 */
class DownloadPage extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			progress: 0
		}
	}
	render() {
		return (
			<View style={styles.container}>
				<View style={styles.dialog}>
					<Text style={styles.tips}>
						正在下载中 {parseInt(this.state.progress * 100)} %
					</Text>
					<AnimatedBar
						progress={this.state.progress}
						borderRadius={10}
						height={2}
					/>
				</View>
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#222',
		opacity: 0.9,
		// paddingBottom: HEIGHT * 0.10
	},
	dialog: {
		justifyContent: 'center',
		alignItems: 'center',
		height: HEIGHT * 0.15,
		width: WIDTH * 0.9,
		backgroundColor: '#fff',
		borderRadius: 10
	},
	tips: {
		alignItems: 'center',
		height: 40,
		color: '#222',
		fontWeight: 'bold',
		fontSize: 18,
		marginBottom: HEIGHT * 0.02
	}
});

/**
 * 导出当前Module
 */
module.exports = DownloadPage;